<script setup>
import Lang from '@/components/Lang.vue'
import { ref, watch } from 'vue'
import { showToast } from 'vant/lib/toast'
import { useRoute, useRouter } from 'vue-router'
import { getVerifyCodeApi, loginApi } from '@/apis/user.js'
import { useLangStore } from '@/stores/lang'

const route = useRoute()
const router = useRouter()
const langStore = useLangStore()

// 动态计算下拉框的高度
const itemHeight = (3.65 * window.innerWidth) / 100
document.documentElement.style.setProperty('--itemHeight', itemHeight + 'px')

let loginshow = ref(true)

const countries = [
  '中国 China',
  '墨西哥 Mexico',
  '美国 USA',
  '德国 Germany',
  '斯洛伐克 Slovakia',
  '马来西亚 Malaysia'
]
const options = countries.map((item) => {
  return {
    value: item,
    label: item
  }
})
const ucountry = ref('中国 China')
const uphone = ref('')
const ucode = ref('')

const area_code = ref('86')

watch(
  () => ucountry.value,
  (newVal) => {
    switch (newVal) {
      case '中国 China':
        area_code.value = '86'
        break
      case '美国 USA':
        area_code.value = '1'
        break
      case '墨西哥 Mexico':
        area_code.value = '52'
        break
      case '德国 Germany':
        area_code.value = '49'
        break
      case '斯洛伐克 Slovakia':
        area_code.value = '421'
        break
      case '马来西亚 Malaysia':
        area_code.value = '60'
        break
      default:
        area_code.value = '86'
        break
    }
  }
)

const nologinshow = ref(false)

const codetips = ref('获取验证码')
const codetips_en = ref('Send code')

// 获取验证码
const getCode = async () => {
  if (uphone.value == '') {
    return showToast('请输入手机号 Please enter your mobile number')
  }
  const res = await getVerifyCodeApi({
    mobile: uphone.value,
    area_code: area_code.value,
    lang: langStore.getLang
  })
  // console.log(res);
  if (res.data.code === 200) {
    // 倒计时
    let countdown = ref(60)
    let timer = setInterval(() => {
      codetips.value = `${countdown.value}s`
      countdown.value--
      if (countdown.value < 0) {
        clearInterval(timer)
        codetips.value = '获取验证码'
        codetips_en.value = 'Send code'
      }
    }, 1000)
    // 发送成功提示
    showToast('验证码已发送 Verification code has been sent')
  } else if (res.data.code === 401) {
    // 无权限 非白名单
    nologinshow.value = true
  } else {
    showToast(res.data.msg)
  }
}

// 登录
const login = async () => {
  if (uphone.value == '' || ucode.value == '') {
    return showToast('请输入完整信息 Please enter complete information')
  }
  area_code.value == '86' ? langStore.changeLang('zh_cn') : langStore.changeLang('en')
  const res = await loginApi({ mobile: uphone.value, code: ucode.value })
  // console.log(res);
  if (res.data.code === 200) {
    // 登录成功 存储token和token过期时间
    localStorage.setItem('token', res.data.data.token)
    localStorage.setItem('expire_at', res.data.data.expire_at)
    // 跳转
    area_code.value == '86'
      ? router.replace({ path: '/cn', query: { from: 'main' } })
      : router.replace({ path: '/en', query: { from: 'main' } })
    // if (area_code.value == '86') {
    //   // 修改语言
    //   langStore.changeLang('zh_cn')
    //   router.replace({ path: '/cn', query: { from: 'main' } })
    // } else {
    //   langStore.changeLang('en')
    //   router.replace({ path: '/en', query: { from: 'main' } })
    // }
    loginshow.value = false
  } else if (res.data.code === 401) {
    // 无权限
    nologinshow.value = true
  } else {
    // 登录失败
    showToast(res.data.msg)
  }
  // 测试
  // if (uphone.value == '123' && ucode.value == '123') {
  //   area_code.value == '86' ? router.replace({ path: '/cn', query: { from: 'main' } }) : router.replace({ path: '/en', query: { from: 'main' } })
  //   loginshow.value = false
  // } else {
  //   nologinshow.value = true
  // }
}

const from = route.query.from
loginshow.value = from == 'main' ? false : true
</script>
<template>
  <div class="index box bg clmcenter">
    <img src="@/assets/img/logo.png" class="logo" alt="logo" />
    <!-- 语言 -->
    <Lang v-show="!loginshow" />
    <div class="container">
      <button type="button" class="btn1" @click="$router.replace('/cn/main')">点击进入</button>
      <div class="welcome_cn">欢迎来到新泉智造中心</div>
    </div>
    <!-- 登录 -->
    <div class="loginbox clmcenter" v-show="loginshow">
      <div class="logininfobox clmcenter">
        <p class="title">短信登录 Verifying your number</p>
        <form class="loginfrm">
          <div class="litem">
            <el-select-v2
              v-model="ucountry"
              :options="options"
              size="large"
              :item-height="itemHeight"
            />
          </div>
          <div class="litem litem_phone">
            <label>+{{ area_code }}</label>
            <input
              type="tel"
              v-model="uphone"
              class="lipt ipt_phone"
              placeholder="输入手机号码 Phone number"
            />
          </div>
          <div class="litem">
            <input
              type="tel"
              v-model="ucode"
              maxlength="4"
              class="lipt ipt_code"
              placeholder="验证码 Verification code"
            />
            <button type="button" class="btn1 btn_code" @click="getCode">
              <p>{{ codetips }}</p>
              <p>{{ codetips_en }}</p>
            </button>
          </div>
        </form>
        <button type="button" class="btn btn_submit" @click="login">提 交 SIGN UP</button>
      </div>
    </div>
    <!-- 登录失败——无权限 -->
    <div class="nologinrole clmcenter" v-show="nologinshow">
      <p>请确认您的权限或与系统管理员联系以获取帮助</p>
      <p>Please confirm your permissions or contact the system administrator for assistance</p>
      <button type="button" class="btn btn_close" @click="nologinshow = false">返 回 BACK</button>
    </div>
  </div>
</template>
<style>
.litem .el-select-v2 {
  width: 100%;
  height: 100%;
  border: none;
  color: #000000;
}
.litem .el-select--large .el-select__wrapper {
  min-height: 3.98vw;
  line-height: 3.98vw;
  font-size: 1.08vw;
}
.litem .el-select__wrapper {
  box-shadow: 0 0 0 0 #fff inset !important;
  padding: 0;
}
.litem .el-select__placeholder {
  color: #000000;
}
.el-select-dropdown__item {
  font-size: 1.08vw;
  line-height: var(--itemHeight) !important;
}
.el-select-dropdown__item.is-selected {
  color: #33c5b8;
}
.litem .el-icon {
  width: 2vw;
}
.litem .el-select__caret {
  font-size: 2vw;
  color: #898989;
}
</style>

<style lang="scss" scoped>
.index {
  color: #ffffff;
  .container {
    margin-top: 13vw;
    text-align: center;
    .btn1 {
      width: 7.03vw;
      height: 1.63vw;
      font-size: 0.87vw;
      // padding: 0.42vw 1.77vw;
      transition: all 0.5s linear;
    }
    .btn::before {
      content: '';
      position: absolute;
      top: -30%;
      left: -15%;
      width: 10%;
      height: 140%;
      background-color: rgba(255, 255, 255, 0.5);
      -webkit-transform: rotate(18deg);
      transform: rotate(18deg);
      box-shadow: 0 0 15px 9px rgba(255, 255, 255, 0.5);
      -webkit-animation: blink 3s ease-in 1s infinite;
      animation: blink 3s ease-in 1s infinite;
    }
    .btn1:hover {
      transform: scale(1.1);
    }
    .welcome_cn {
      position: relative;
      margin-top: 5.47vw;
      font-size: 1.38vw;
      letter-spacing: 2.6vw;
      padding-left: 2.6vw;
      margin-bottom: 8vw;
      color: rgba($color: #ffffff, $alpha: 0.8);
    }
    // .welcome_cn::after {
    //   position: absolute;
    //   left: 2.6vw;
    //   bottom: 0;
    //   content: "欢迎来到新泉智造中心";
    //   transform: rotateX(180deg) translateY(-90%);
    //   background: linear-gradient(to bottom, transparent 20%, rgba(255, 255, 255, 0.4) 70%);
    //   background-clip: text;
    //   -webkit-background-clip: text;
    //   -moz-background-clip: text;
    //   color: transparent;
    // }
  }
  // 登录
  .loginbox,
  .nologinrole {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba($color: #000000, $alpha: 0.7);
  }
  .loginbox {
    .logininfobox {
      background-color: rgba($color: #ffffff, $alpha: 0.7);
      padding: 4.48vw 4.84vw;
      border-radius: 1.17vw;
      .title {
        align-self: flex-start;
        font-size: 1.3vw;
        color: #000000;
        font-weight: bold;
      }
      .loginfrm {
        margin-top: 2.29vw;
        .litem {
          width: 28.18vw;
          height: 3.98vw;
          border-radius: 0.25vw;
          background-color: #ffffff;
          margin-bottom: 1.98vw;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 1.458vw;
          overflow: hidden;
          label,
          input {
            font-size: 1.08vw;
            color: #000000;
          }
          .lipt {
            flex: 1;
            margin-left: 0.5vw;
          }
          .ipt_phone {
            max-width: 20.8vw;
          }
          .ipt_code {
            max-width: 15.6vw;
          }
          .btn_code {
            padding: 0.26vw 1.09vw;
            p:first-child {
              font-size: 0.87vw;
            }
            p:last-child {
              font-size: 0.75vw;
            }
          }
        }
        .litem_phone {
          justify-content: flex-start;
        }
      }
      .btn_submit {
        margin-top: 1.5625vw;
        font-size: 1.085vw;
        color: #ffffff;
        padding: 0.57vw 0.73vw;
        transition: all 0.5s linear;
      }
      .btn_submit:hover {
        transform: scale(1.1);
      }
      // .btn_submit::before {
      //   content: '';
      //   position: absolute;
      //   top: -30%;
      //   left: -15%;
      //   width: 10%;
      //   height: 140%;
      //   background-color: rgba(255, 255, 255, 0.5);
      //   -webkit-transform: rotate(18deg);
      //   transform: rotate(18deg);
      //   box-shadow: 0 0 15px 9px rgba(255, 255, 255, 0.5);
      //   -webkit-animation: blink 3s ease-in 1s infinite;
      //   animation: blink 3s ease-in 1s infinite;
      // }
    }
  }
  // 无权限
  .nologinrole {
    text-align: center;
    z-index: 99;
    p {
      font-size: 1.3vw;
      color: #ffffff;
      line-height: 1.4;
    }
    p:first-child {
      letter-spacing: 0.2vw;
    }
    .btn_close {
      font-size: 1.08vw;
      margin-top: 1.8vw;
      transition: all 0.5s linear;
      padding: 0.57vw 1.5vw;
    }
    .btn_close:hover {
      transform: scale(1.1);
    }
  }
}
</style>
